<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改场馆信息</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<style>
	form{
		width: 50%;
		border-collapse: collapse;
		margin-top: 100px;
		margin-left: auto;
		margin-right: auto;
	}.avatar-container {
		text-align: center; /* 使头像和上传按钮居中 */
		margin-top: 50px;
    }.avatar {
		width: 150px; /* 设置头像的宽度 */
		height: 150px; /* 设置头像的高度 */
		border-radius: 50%; /* 设置头像为圆形 */
		margin-bottom: 20px; /* 添加一些间距 */
	}
</style>
</head>
<body>
	<div id="app">
	<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
	  
	  <div class="layui-form-item">
	  		<label class="layui-form-label">场馆编号</label>
	  		<div class="layui-input-block">
	  		  <input type="text" v-model="stadium.stadiumId"  placeholder="请输入" autocomplete="off" class="layui-input" disabled>
	  		</div>
	  </div>
	  
	  <div class="layui-form-item">
		<label class="layui-form-label">场馆名字</label>
		<div class="layui-input-block">
		  <input type="text" v-model="stadium.stadiumName"  placeholder="请输入" autocomplete="off" class="layui-input">
		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">场馆长度</label>
	  		<div class="layui-input-block">
	  		  <input type="text" v-model="stadium.stadiumLength"  placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">场馆宽度</label>
	  		<div class="layui-input-block">
	  		  <input type="text" v-model="stadium.stadiumWidth"  placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <div class="layui-form-item">
	  		<label class="layui-form-label">场馆高度</label>
	  		<div class="layui-input-block">
	  		  <input type="text" v-model="stadium.stadiumHeight"  placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div>
	  <!-- <div class="layui-form-item">
	  		<label class="layui-form-label">负责人</label>
	  		<div class="layui-input-block">
	  		  <input type="text"  placeholder="请输入" autocomplete="off" class="layui-input">
	  		</div>
	  </div> -->
	  <div class="layui-form-item layui-form-text">
		<label class="layui-form-label">备注</label>
		<div class="layui-input-block">
		  <textarea  v-model="stadium.stadiumRemark"  placeholder="请输入内容" class="layui-textarea"></textarea>
		</div>
	  </div>
	  <div class="layui-form-item">
		<div class="layui-input-block">
		  <button type="button" @click="doUpdate"  class="layui-btn" lay-submit lay-filter="*">提交修改</button>
		</div>
	  </div>
	  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
	</form>
	</div>
	
	
	
	
	
	
	<script src="layui/layui.js"></script>
	<script>
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //各种基于事件的操作，下面会有进一步介绍
	});
	</script>
		<script>
	        // 获取上传头像的input元素和头像预览的img元素
	        const avatarInput = document.getElementById('avatar-input');
	        const avatarPreview = document.getElementById('avatar-preview');
	
	        // 监听input元素的change事件
	        avatarInput.addEventListener('change', function(event) {
	            // 获取选中的文件
	            const file = event.target.files[0];
	            // 创建一个FileReader对象
	            const reader = new FileReader();
	            // 读取文件内容
	            reader.readAsDataURL(file);
	            // 监听FileReader对象的load事件
	            reader.addEventListener('load', function() {
	                // 将读取到的文件内容设置为头像预览的src属性
	                avatarPreview.src = reader.result;
	            });
	        });
	    </script>
		
		
	
	
	
	
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" ></script>
	<script type="text/javascript">
		let vm = new Vue({
			el:"#app",
			data:{
				stadium:{
					
				}	
				
			},
			created(){
				//获取从list.html
				const ps = new URLSearchParams(window.location.search);
				let gid = ps.get("gid");
				
				let url = "http://localhost:8080/stadium/get";
				let params = {stadiumId:gid};
				
				$.get(url, params, res => {
				    if(res.code==200){
						this.stadium=res.data;
					}
				}, "JSON");
				
			},
			methods:{
				doUpdate(){
					//获取修改后的数据
					//v-model双向绑定
					let url = "http://localhost:8080/stadium/update";
					let params = this.stadium;
					$.get(url, params, res => {
						layer.msg(res.msg);
					    if(res.code==200) {
							setTimeout(()=>{
								window.location.href="stadium-list.html";
							},2000);
						} 	
					}, "JSON");
				}
			}
				
		});
		
	</script>
	
	
	
</body>
</html>